<template>
	<view class="content">
		<u-navbar bgColor="#f74346" title="首页" :safeAreaInsetTop="true" @leftClick="leftClick">

			<view class="u-nav-slot" slot="left">
				<view class="shehiz">
					<u-icon name="map" color="#f75356"></u-icon>
					<text>获取失败</text>

				</view>

			</view>
		</u-navbar>

		<view class="qd">
			<text style="font-size: 18px;font-weight: bold;">抢单大厅</text>
			<view class="suij">
				<view class="ju" @click="open">
					距离筛选
					<image src="/static/距离.png" alt="" srcset="" />
				</view>



			</view>
			<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
				<text>请选择距离</text>
				<view class="items">

					<view class="item" v-for="(it,index) in distance" :key="index" @click="xuanz(it,index)">
						<text :style="{
							background:it.flag?'#e53e31':'#ffffff',borderRadius:'15px',padding:'4px'
						}">{{it.name}}</text>

					</view>

				</view>


			</uni-popup>
		</view>
		<view v-if="listdata.length>0">
			<itemddVue></itemddVue>


		</view>
		<view v-else>

			<u-empty mode="order">
			</u-empty>

		</view>


	</view>
</template>

<script>
	import itemddVue from './itemdd/itemdd.vue';
	export default {
		components: {
			itemddVue
		},
		data() {
			return {
				jvalue: 0,
				distance: [{
						value: 0,
						name: '全部',
						flag: true
					},
					{
						value: 3,
						name: '3公里内',
						flag: false
					},
					{
						value: 5,
						name: '5公里内',
						flag: false
					},
					{
						value: 10,
						name: '10公里内',
						flag: false
					},
					{
						value: 20,
						name: '20公里内',
						flag: false
					},

				],
				listdata: [
					{
					image: "/static/logo.png",
					fwjs: "日常保洁",
					yytime: "2023-10-17 23:00",
					fwstatus: 3,
					address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

				},
				]
			}
		},
		onLoad() {

		},
		methods: {
			leftClick() {
				console.log('地图');
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			xuanz(e, index) {
				for (let i = 0; i < this.distance.length; i++) {
					this.distance[i].flag = false
				}
				this.distance[index].flag = !this.distance[index].flag
				if (e.flag) {
					this.jvalue = e.value
					console.log(this.jvalue);
				}

				console.log(e);
				this.$refs.popup.close()
			},



		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4ffff;
	}

	.content {
		.u-nav-slot {
			.shehiz {
				background-color: #ffffff;
				padding: 6px;
				border-radius: 15px;
				display: flex;
				align-items: center;

				text {
					color: #2d2324;
				}

			}


		}

		.qd {
			margin: 8px;
			margin-top: 73px;
			display: flex;
			justify-content: space-between;

			.suij {
				.ju {
					display: flex;
					align-items: center;

					image {
						width: 22px;
						height: 22px;
						margin-left: 4px;
					}
				}
			}

		}

		.items {
			display: flex;
			// margin-top: 4px;
			align-items: center;

			.item {
				margin: 3px;

			}
		}



	}
</style>